<template>
    <div>
        <div class="recommend-title">
            <span class="iconfont icon-heart"></span>猜你喜欢
        </div>
        <ul>
            <router-link tag="li" class="list-item" v-for="item in recommendList"
                         :key="item.id">
                <div class="item-img">
                    <img src="item.imgUrl" alt="">
                </div>
                <div class="item-img-tag">{{item.tag}}</div>
                <div class="item-info">
                    <div class="inner-box">
                        <div class="info-title">{{item.title}}</div>
                        <div class="info-comment">
                            <span class="iconfont icon-star"></span>
                            <span class="iconfont icon-star"></span>
                            <span class="iconfont icon-star"></span>
                            <span class="iconfont icon-star"></span>
                            <span class="iconfont icon-star"></span>
                            <span class="comment-num">{{item.commentNum}}条评价</span>
                        </div>
                        <div class="info-price">
                            <span class="price">￥<em>{{item.price}}</em></span>
                            <span class="district">{{item.district}}</span>
                        </div>
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name:'HomeRecommend',
    props:{
        recommendList:Array
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';
div{
    box-sizing:border-box; 
}
.recommend-title{
    width:100%;
    height: .8rem;
    line-height: .8rem;
    font-size: .32rem;
    background-color: #eee;
    padding:0 .2rem;
}
.recommend-title .icon-heart{
    color: #FF4040;
}
.list-item{
    position:relative;
    display:flex;
    width: 100%;
    height: 2.4rem;
}
.list-item .item-img{
    width: 2.4rem;
    height: 2.4rem;
    padding: .2rem;
}
.list-item .item-img img{
    width:100%
    height:100%;
}
.list-item .item-img-tag{
    position:absolute;
    top:.2rem;
    left:.2rem;
    width: 1.02rem;
    height: .38rem;
    line-height: .38rem;
    background-image:  url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png);
}
</style>